<template>
    <div>
        <navigationBar :bgType="3" :backType="2" :navigationTitle="title" />
        <view class="content">
            <view class="items">
                <view
                    class="card item"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <view class="like">
                        <view class="box">
                            <image
                                class="avatar"
                                :src="item.user.avatar"
                                mode="scaleToFill"
                            />
                            <view class="info">
                                <view class="name">
                                    {{ item.user.nickname }}
                                </view>
                                <view class="sub">
                                    <view class="tips" v-if="type == 'like'">
                                        赞了你的动态
                                    </view>
                                    <view class="tips" v-else
                                        >评论了你的动态</view
                                    >
                                    <view class="time">
                                        {{ item.createtime_text }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="dynamicCover">
                            <image
                                class="img"
                                v-if="item.dynamic.image"
                                :src="item.dynamic.image"
                                mode="scaleToFill"
                            />
                        </view>
                    </view>
                    <view class="line" v-if="type == 'comment'"></view>
                    <view class="comment flex" v-if="type == 'comment'">
                        <view class="title">评论内容：</view>
                        <view class="contens">
                            {{ item.content }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>

<script>
import { likeUserList } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            list: [],
            type: "",
            title: "",
        };
    },

    onLoad(options) {
        this.type = options.type;
        this.title = options.type == "like" ? "收到的点赞" : "收到的评论";
        uni.setNavigationBarTitle({
            title: this.title,
        });
        this.getList();
    },

    methods: {
        getList() {
            likeUserList({ type: this.type == "like" ? 1 : 2 }).then((res) => {
                this.list = res.data.data;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    .item {
        margin-bottom: 20rpx;
        .like {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box {
                display: flex;
                align-items: center;
            }
            .avatar {
                width: 84rpx;
                height: 84rpx;
                border-radius: 50%;
            }
            .info {
                margin-left: 20rpx;
                .name {
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 15rpx;
                }
                .sub {
                    display: flex;
                    .tips {
                        font-size: 24rpx;
                        color: #999999;
                        margin-right: 20rpx;
                    }
                    .time {
                        font-size: 24rpx;
                        color: #999999;
                    }
                }
            }
            .dynamicCover {
                width: 104rpx;
                height: 104rpx;
                .img {
                    width: 104rpx;
                    height: 104rpx;
                    border-radius: 10rpx;
                }
            }
        }
        .line {
            width: 100%;
            height: 2rpx;
            background: #eaeaea;
            margin: 20rpx 0;
        }
        .comment {
            font-size: 26rpx;
            .title {
                line-height: 1.2;
                min-width: 120rpx;
            }
            .contens {
                line-height: 1.2;
            }
        }
    }
}
.card {
    background: white;
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
</style>